
// 相当于vue项目中的入口文件 main.js 
// 引入 react.js
import React from 'react';
// 引入react-dom.js
import ReactDOM from 'react-dom/client';
// 引入全局样式
import './index.css';
// 引入根组件 相当于vue 中的引入App.bue
import App from './App.js';
// 谷歌性能优化文件, 该文件需要科学上网,在国内不用
// import reportWebVitals from './reportWebVitals';

// 导入 react-redux
import { Provider } from 'react-redux'
// 引入store 仓库
// import store from './store-react-redux'
// import store from './store-modules'

// 引入rtk仓库
// import store from './store-rtk';
// 引入rtk-modules中的store
import store from './store-rtk-module';


// 引入如有的模式包
import { HashRouter, BrowserRouter as Router } from 'react-router-dom'

// 创建react 根实例. 并挂载绑定根节点,
const root = ReactDOM.createRoot(document.getElementById('root'));
// 使用root 根实例提供的render 方法渲染App.js 这个根组件
// 注意: 不建议使用严格模式,严格模式可以做一些开发的提示和警告. 主要是一些 代码版本等警告
// 因为在开发阶段项目中一般都会使用第三方插件, 而现在react 版本是18,那么插件可能是更早之前开发的
// 所以选择严格模式会有插件版本警告报错, 所以不需要, 当前代码上线后, 严格模式不起作用.

// root.render() 该方法中如果传的是函数组件,他会调用该函数, 然后将该函数组件的返回值也就是dom渲染
// 在页面中,如果传递的类组件, 实例化该类, 然后调用实例上的render方法返回dom 结构渲染页面

root.render(
  <Provider store={store}>
    {/* 使用路由包包裹根组件, 这样全局可以使用路由了 */}
    <Router>
      <App />
    </Router>
  </Provider>
);


// 通过bom 获取浏览器的信息/代理商信息
//console.log('navigator', navigator);

// public 中的robots.txt, 可以规定 哪些浏览器或者搜索引擎可以爬取网站的内容
// user-Agent: 规定是什么搜索引擎或浏览器
// disallow: 地址  / 表示跟地址, 规定网站中哪些页面路径不被爬取到

// 天猫案例  所有的搜索引擎都不能爬取
// User-agent: * 
// Disallow: /

// 如果你想让你的网站被快速的搜索引擎搜索到, 你需要做seo 搜索引擎优化,
// 常见的就是在 header 标签中的meta 标签上添加content 属性, 值就是有关该网站关键字描述
